<template>
	<view class="desc">
		<image :src="appLogo" class="logo"></image>
		<text class="name">{{ appName }}</text>
		<text v-if="needUpgrade">{{ $t('app.upgrade.currentVersion') }}：{{ appVersion }}</text>
		<text v-if="needUpgrade">{{ $t('app.upgrade.releaseTime') }}：{{ releaseTime | dateFormat('yyyy-MM-dd') }}</text>
		<view class="btn" v-if="showBtn">
			<u-button type="primary" size="medium" @click="upgrade">{{ $t('app.upgrade.versionUpdate') }}</u-button>
		</view>
		
		<!-- 更新 -->
		<uni-popup ref="upgrade">
			<upgrade-popup @close="closeUpgrade" @downloadSuccess="downloadSuccess"></upgrade-popup>
		</uni-popup>
	</view>
</template>

<script>
	import upgradePopup from "@/components/base/upgrade-popup.vue"
	import { getAppVersion, postDownSucessInfo } from '@/api/platform/common.js'
	import project from '@/utils/config/project.js'
	import { utilities } from '@/utils/common.js'
	
	export default {
		components: {
			upgradePopup
		},
		data() {
			return {
				appLogo: '',
				appName: '',
				appVersion: '',
				releaseTime: '',
				latestVersion: '',
				showBtn: false
			}
		},
		onLoad() {
			this.init()
		},
		computed: {
			needUpgrade() {
				return utilities.getConfig('PROJECT').NEED_UPGRADE
			}
		},
		methods: {
			async init() {
				this.appLogo = "../../../static/images/logo/" + project.COMPANY_LOGO
				this.appName = project.APP_NAME
				
				if(this.needUpgrade) {
					this.latestVersion = uni.getStorageSync("latestVersion")
					this.appVersion = uni.getStorageSync("currentVersion")
					
					await getAppVersion({ appVersion: this.appVersion }).then(res => {
						if(res.data) {
							this.releaseTime = res.data.createTime
						}
					})
					
					if(utilities.compareVersion(this.appVersion, this.latestVersion.appVersion) == -1) {
						this.showBtn = true
					}
				}
			},
			upgrade() {
				this.$refs.upgrade.open()
			},
			closeUpgrade() {
				this.$refs.upgrade.close()
			},
			downloadSuccess() {
				this.latestVersion.updateUser = uni.getStorageSync("userId")
				postDownSucessInfo(this.latestVersion)
			}
		}
	}
</script>

<style lang="scss">
	.desc {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 16px;
		margin-top: 10px;
		
		text {
			margin: 5px 0;
		}
	}
	
	.name {
		font-size: 20px;
		font-weight: 800;
	}
	
	.logo {
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}
	
	.btn {
		margin-top: 20px;
	}
</style>